<script setup>
	import {
		ref,
		reactive
	} from "vue";

	// 原生导航栏信息
	const wxCapsule = ref(null);
	// 自定义导航栏cont样式
	const CustomNavbarContStyle = ref("");
	// 自定义导航栏左侧内容样式
	const CustomNavbarLeftStyle = ref("");
	// 自定义导航栏右侧胶囊样式
	const CustomNavbarRightStyle = ref("");
	// 自定义导航栏高度
	const CustomNavbarHeight = ref(0);
	const keyWord = ref("");

	/**
	 * @description 设置导航栏
	 */
	const setCustomNavbarHeight = () => {
		// 获取屏幕宽度（计算右距需要）
		const systemInfo = uni.getSystemInfoSync();
		const screenWidth = systemInfo.screenWidth;
		// 胶囊距离屏幕右边的距离
		// screenWidth - wxCapsule.value.right

		keyWord.value = "";
		wxCapsule.value = uni.getMenuButtonBoundingClientRect();
		console.log("原生导航栏胶囊信息start");
		console.log(wxCapsule.value);
		console.log("原生导航栏胶囊信息end");

		CustomNavbarContStyle.value = `height: ${wxCapsule.value.bottom}px;`;
		CustomNavbarLeftStyle.value =
			`width: 100%;height: ${wxCapsule.value.bottom - wxCapsule.value.top}px;line-height: ${wxCapsule.value.bottom - wxCapsule.value.top}px;`;
		CustomNavbarRightStyle.value =
			`width: ${wxCapsule.value.right - wxCapsule.value.left + (screenWidth - wxCapsule.value.right)}px;height: ${wxCapsule.value.bottom - wxCapsule.value.top}px;`;
		CustomNavbarHeight.value = wxCapsule.value.bottom;
	}

	/**
	 * @description 返回上一级
	 */
	const GoBackTop = () => {
		uni.navigateBack({
			delta: 1,
			fail: () => {
				uni.reLaunch({
					url: "/pages/table/index/index"
				});
			}
		});
	}

	// 接收父组件传递的变量及方法
	const props = defineProps({
		// 是否显示返回icon
		backIconShow: {
			type: Boolean,
			default: true,
		},
		// 返回icon的颜色
		backIconColor: {
			type: String,
			default: "#333",
		},
		// 标题
		title: {
			type: String,
			default: "默认",
		},
	});

	/**
	 * @description 暴露变量及方法
	 */
	defineExpose({
		CustomNavbarHeight,
		setCustomNavbarHeight
	});

	defineOptions({
		options: {
			styleIsolation: 'shared' // 允许样式穿透（微信小程序）
		}
	});
</script>

<template>
	<view class="CustomNavbar-cont" :style="CustomNavbarContStyle">
		<!-- 内容 -->
		<view class="CustomNavbar-left" :style="CustomNavbarLeftStyle">
			<!-- 返回按钮 -->
			<view v-if="backIconShow" class="CustomNavbar-left-back-icon" @tap="GoBackTop">
				<text class="iconfont icon-fanhui" :style="'color: ' + backIconColor"></text>
			</view>

			<!-- 标题 -->
			<view class="CustomNavbar-left-title">{{title}}</view>

			<!-- CustomNavbar-right -->
			<!-- <view :style="CustomNavbarRightStyle"></view> -->
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import "./CustomNavbar.scss";
</style>